<html>
  <body>
    <form action="export">
      <table>
        <tr>
          <td>Table</td>
          <td>
            <select name="table" onChange="javascript:handleTableChange(this)">
              {% for export_table in export_tables %}
                <option>{{ export_table }}
              {% endfor %}
            </select>
          </td>
        </tr>
        <tr id="session_row">
          <td>Session</td>
          <td>
            <select name="session">
              {% for session in sessions %}
                <option>{{ session }}</option>
              {% endfor %}
            </select>
          </td>
        </tr>
        <tr id="batch_row" style="display: none;">
          <td>Batch</td>
          <td>
            <select name="batch">
              {% for batch in batches %}
                <option>{{ batch }}</option>
              {% endfor %}
            </select>
          </td>
        </tr>
      </table>

      <input type="submit" value="Export">
    </form>
  </body>

  <script>
    function handleTableChange(tableMenu) {
      if (tableMenu.value == 'Student') {
        setSessionMenuVisible(false);
        setBatchMenuVisible(false);
      } else if (tableMenu.value == 'FriendSurvey') {
        setSessionMenuVisible(true);
        setBatchMenuVisible(true);
      } else {
        setSessionMenuVisible(true);
        setBatchMenuVisible(false);
      }
    }

    function setSessionMenuVisible(visible) {
      var sessionRowEl = document.getElementById('session_row');
      showElement(sessionRowEl, visible);
    }

    function setBatchMenuVisible(visible) {
      var batchRowEl = document.getElementById('batch_row');
      showElement(batchRowEl, visible);
    }

    function showElement(el, display) {
      el.style.display = display ? '' : 'none';
    }
  </script>
</html>
